<script setup>
import { ref } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
const navbar = ref(props.list[0])
const emits = defineEmits(['chosedBar'])
const chosed = (item) => {
  // if (item == '气象设备') {
  // window.open('http://dz5.zy1949.com/', '_blank')
  // } else {
  navbar.value = item
  emits('chosedBar', navbar.value)
  // }
}
</script>
<template>
  <div class="bottombox">
    <div
      class="item"
      v-for="(item, index) in list"
      :key="index"
      :class="{ active: navbar === item }"
      @click="chosed(item)"
    >
      <p>{{ item }}</p>
    </div>
  </div>
</template>
<style scoped lang="scss">
.bottombox {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;

  .item {
    width: 163px;
    height: 48px;
    margin: 0 20px;
    background: url('@img/common/bottom_bar.png');
    background-size: 100% 100%;
    cursor: pointer;
    text-align: center;
    line-height: 48px;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    color: #93d7dd;

    &.active {
      background: url('@img/common/bottom_bar_chosed.png');
      background-size: 100% 100%;

      p {
        text-shadow:
          0px 2px 6px #010724,
          inset 0px -2px 0px #00e0ff;
        background: linear-gradient(to bottom, #eeeeee 0%, #bff2f2 27%, #40f4ff 100%);
        -webkit-background-clip: text;
        /* 让背景裁剪为文本形状 */
        -webkit-text-fill-color: transparent;
        /* 使文本填充为透明 */
      }
    }
  }
}
</style>
